<template>
  <h1>计算器练习</h1>
  <input type="text" placeholder="请输入数字1" v-model="num1">
  <input type="text" placeholder="请输入数字2" v-model="num2">
  <hr>
  <button @click="cal('+')">加</button>
  <button @click="cal('-')">减</button>
  <button @click="cal('*')">乘</button>
  <button @click="cal('/')">除</button>
  <h3>计算结果:{{result}}</h3>
</template>

<script setup>
import {ref} from "vue";

const test = () => {
  alert(num1);
}
const num1 = ref('');
const num2 = ref('');
const result = ref('');
const cal = (op) => {
  if (op === '/'){
    if (num2.value === '0'){
      alert('除数不能为0');
      return;
    }
  }
  // 响应式变量在JS中必须.value!
  // eval()
  result.value = eval(num1.value + op + num2.value);
}
</script>

<style scoped>

</style>